<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阿里云VOD测试页面</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            margin-top: 40px;
        }
        .card {
            margin-bottom: 20px;
        }
        pre {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 5px;
            overflow-x: auto;
        }
        .status-success {
            color: #198754;
        }
        .status-error {
            color: #dc3545;
        }
        .test-section {
            margin-bottom: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>阿里云VOD配置测试</h1>
        <div class="row">
            <div class="col-md-8">
                <div id="sdkTest" class="test-section">
                    <div class="card">
                        <div class="card-header">
                            <h5>SDK安装状态检测</h5>
                        </div>
                        <div class="card-body">
                            <p>检测阿里云SDK是否已正确安装</p>
                            <div id="sdkStatus">
                                <div class="spinner-border spinner-border-sm" role="status">
                                    <span class="visually-hidden">检测中...</span>
                                </div>
                                <span class="ms-2">检测中...</span>
                            </div>
                            <div id="sdkDetails" class="mt-3"></div>
                        </div>
                    </div>
                </div>
                
                <div id="configTest" class="test-section">
                    <div class="card">
                        <div class="card-header">
                            <h5>VOD配置状态检测</h5>
                        </div>
                        <div class="card-body">
                            <p>检测阿里云视频点播服务配置是否正确</p>
                            <div id="configStatus">
                                <div class="spinner-border spinner-border-sm" role="status">
                                    <span class="visually-hidden">检测中...</span>
                                </div>
                                <span class="ms-2">检测中...</span>
                            </div>
                            <div id="configDetails" class="mt-3"></div>
                        </div>
                    </div>
                </div>
                
                <div id="videoPlayTest" class="test-section">
                    <div class="card">
                        <div class="card-header">
                            <h5>播放凭证测试</h5>
                        </div>
                        <div class="card-body">
                            <p>测试获取视频播放凭证</p>
                            <div class="mb-3">
                                <label for="videoId" class="form-label">视频ID</label>
                                <input type="text" class="form-control" id="videoId" placeholder="输入阿里云VOD视频ID">
                            </div>
                            <button id="testPlayAuth" class="btn btn-primary">测试播放凭证</button>
                            <div id="playAuthStatus" class="mt-3" style="display: none;">
                                <div class="spinner-border spinner-border-sm" role="status">
                                    <span class="visually-hidden">测试中...</span>
                                </div>
                                <span class="ms-2">测试中...</span>
                            </div>
                            <div id="playAuthDetails" class="mt-3"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-header">
                        <h5>帮助和说明</h5>
                    </div>
                    <div class="card-body">
                        <h6>阿里云SDK安装说明</h6>
                        <p>要安装阿里云SDK，请在项目根目录执行以下命令：</p>
                        <pre>composer require alibabacloud/sdk</pre>
                        
                        <h6 class="mt-4">阿里云配置说明</h6>
                        <p>阿里云VOD配置需要以下信息：</p>
                        <ul>
                            <li><strong>AccessKeyID</strong> - 从阿里云控制台获取</li>
                            <li><strong>AccessKeySecret</strong> - 从阿里云控制台获取</li>
                            <li><strong>RegionId</strong> - 通常为 cn-shanghai</li>
                        </ul>
                        <p>这些配置项需要存储在数据库的settings表中。</p>
                        
                        <h6 class="mt-4">视频ID说明</h6>
                        <p>视频ID是阿里云VOD为每个上传的视频分配的唯一标识符，类似于：</p>
                        <code>93ab850807bf4a8b************</code>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 测试SDK安装
            testSdkInstallation();
            
            // 测试配置
            testVodConfiguration();
            
            // 播放凭证测试按钮事件
            document.getElementById('testPlayAuth').addEventListener('click', function() {
                testPlayAuth();
            });
        });
        
        function testSdkInstallation() {
            fetch('{{ route('test.vod.connection') }}')
                .then(response => response.json())
                .then(data => {
                    let statusElement = document.getElementById('sdkStatus');
                    let detailsElement = document.getElementById('sdkDetails');
                    
                    if (data.sdk_installed) {
                        statusElement.innerHTML = '<span class="status-success"><i class="bi bi-check-circle"></i> SDK已安装</span>';
                        detailsElement.innerHTML = `<div class="alert alert-success">
                            阿里云SDK已成功安装，版本: ${data.sdk_version || '未知'}
                        </div>`;
                    } else {
                        statusElement.innerHTML = '<span class="status-error"><i class="bi bi-x-circle"></i> SDK未安装</span>';
                        detailsElement.innerHTML = `<div class="alert alert-danger">
                            阿里云SDK未安装。请运行以下命令安装：
                            <pre>composer require alibabacloud/sdk</pre>
                        </div>`;
                    }
                })
                .catch(error => {
                    let statusElement = document.getElementById('sdkStatus');
                    let detailsElement = document.getElementById('sdkDetails');
                    
                    statusElement.innerHTML = '<span class="status-error"><i class="bi bi-x-circle"></i> 检测失败</span>';
                    detailsElement.innerHTML = `<div class="alert alert-danger">
                        检测SDK安装状态时发生错误: ${error.message}
                    </div>`;
                });
        }
        
        function testVodConfiguration() {
            fetch('{{ route('test.vod.connection') }}')
                .then(response => response.json())
                .then(data => {
                    let statusElement = document.getElementById('configStatus');
                    let detailsElement = document.getElementById('configDetails');
                    
                    if (data.config_status) {
                        statusElement.innerHTML = '<span class="status-success"><i class="bi bi-check-circle"></i> 配置正确</span>';
                        detailsElement.innerHTML = `<div class="alert alert-success">
                            阿里云VOD配置正确，可以正常使用视频点播服务。
                        </div>`;
                    } else {
                        statusElement.innerHTML = '<span class="status-error"><i class="bi bi-x-circle"></i> 配置错误</span>';
                        
                        let errorList = '<ul>';
                        if (data.config_errors && data.config_errors.length > 0) {
                            data.config_errors.forEach(error => {
                                errorList += `<li>${error}</li>`;
                            });
                        } else {
                            errorList += '<li>未知配置错误</li>';
                        }
                        errorList += '</ul>';
                        
                        detailsElement.innerHTML = `<div class="alert alert-danger">
                            阿里云VOD配置存在以下问题：
                            ${errorList}
                        </div>`;
                    }
                })
                .catch(error => {
                    let statusElement = document.getElementById('configStatus');
                    let detailsElement = document.getElementById('configDetails');
                    
                    statusElement.innerHTML = '<span class="status-error"><i class="bi bi-x-circle"></i> 检测失败</span>';
                    detailsElement.innerHTML = `<div class="alert alert-danger">
                        检测配置状态时发生错误: ${error.message}
                    </div>`;
                });
        }
        
        function testPlayAuth() {
            let videoId = document.getElementById('videoId').value;
            if (!videoId) {
                document.getElementById('playAuthDetails').innerHTML = `
                    <div class="alert alert-warning">
                        请输入有效的视频ID再进行测试
                    </div>
                `;
                return;
            }
            
            // 显示加载中状态
            document.getElementById('playAuthStatus').style.display = 'block';
            document.getElementById('playAuthDetails').innerHTML = '';
            
            // 创建表单数据
            let formData = new FormData();
            formData.append('videoId', videoId);
            formData.append('_token', '{{ csrf_token() }}');
            
            // 发送AJAX请求获取播放凭证
            fetch('{{ route('course.getVideoPlayAuth') }}', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
            .then(response => response.json())
            .then(data => {
                // 隐藏加载中状态
                document.getElementById('playAuthStatus').style.display = 'none';
                
                if (data.code === 1) {
                    document.getElementById('playAuthDetails').innerHTML = `
                        <div class="alert alert-success">
                            <h6>获取播放凭证成功！</h6>
                            <p>视频ID: ${data.data.VideoId}</p>
                            <p>播放凭证长度: ${data.data.PlayAuth.length} 字符</p>
                            <p>播放凭证 (部分): ${data.data.PlayAuth.substring(0, 50)}...</p>
                        </div>
                    `;
                } else {
                    let errorDetails = '';
                    if (data.details && Array.isArray(data.details)) {
                        errorDetails = '<ul>';
                        data.details.forEach(detail => {
                            errorDetails += `<li>${detail}</li>`;
                        });
                        errorDetails += '</ul>';
                    }
                    
                    document.getElementById('playAuthDetails').innerHTML = `
                        <div class="alert alert-danger">
                            <h6>获取播放凭证失败</h6>
                            <p>${data.msg}</p>
                            ${errorDetails}
                        </div>
                    `;
                }
            })
            .catch(error => {
                // 隐藏加载中状态
                document.getElementById('playAuthStatus').style.display = 'none';
                
                document.getElementById('playAuthDetails').innerHTML = `
                    <div class="alert alert-danger">
                        <h6>请求失败</h6>
                        <p>${error.message}</p>
                    </div>
                `;
            });
        }
    </script>
</body>
</html> 